<script setup>
import {getPaymentAPI, goToPay} from "@/api/pay.js";
import {useRoute} from "vue-router";
import {ref} from "vue";
import { useCountDown } from "@/utils/countDown.js";

const isLoading = ref(false);
const route = useRoute()
const total = ref(0)
const { formatTime, start } = useCountDown()
const getOrderDetail = async () => {
  isLoading.value = true
  const res = await getPaymentAPI(route.params.id)
  start(res.result.countdown)
  total.value = res.result.totalMoney
  isLoading.value = false
}

getOrderDetail()

const baseURL = 'http://pcapi-xiaotuxian-front-devtest.itheima.net/'
const backURL = 'http://127.0.0.1:5173/paycallback'
const redirectUrl = encodeURIComponent(backURL)
const payUrl = `${baseURL}pay/aliPay?orderId=${route.params.id}&redirect=${redirectUrl}`

</script>

<template>
  <div class="xtx-pay-page">
    <div class="container" v-loading="isLoading">
      <!-- 付款信息 -->
      <div class="pay-info">
        <span class="icon iconfont icon-queren2"></span>
        <div class="tip">
          <p class="first">订单提交成功！请尽快完成支付。</p>
          <p class="second">支付还剩 <span>{{ formatTime }}</span>, 超时后将取消订单</p>
        </div>
        <div class="amount">
          <span>应付总额：</span>
          <span class="num">¥{{ total }}</span>
        </div>
      </div>
      <!-- 付款方式 -->
      <div class="pay-type">
        <p class="head">选择以下支付方式付款</p>
        <div class="item">
          <p>支付平台</p>
          <a class="btn wx" href="javascript:">
            <i class="icon iconfont icon-weixinzhifu"></i>
            微信支付
          </a>
          <a class="btn alipay" :href="payUrl">
            <i class="icon iconfont icon-zhifubaopc"></i>
          </a>
        </div>
        <div class="item">
          <p>支付方式</p>
          <a class="btn" href="javascript:">招商银行</a>
          <a class="btn" href="javascript:">工商银行</a>
          <a class="btn" href="javascript:">建设银行</a>
          <a class="btn" href="javascript:">农业银行</a>
          <a class="btn" href="javascript:">交通银行</a>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.xtx-pay-page {
  .container {
    .pay-info {
      display: flex;
      background-color: #fff;
      margin-top: 20px;
      height: 200px;
      align-items: center;
      .icon-queren2 {
        color: $xtxColor;
        font-size: 100px;
        margin-left: 50px;
      }
      .tip {
        margin-left: 20px;
        .first {
          color: #333333;
          font-size: 20px;
        }
        .second {
          color: #666666;
        }
      }
      .amount {
        margin-left: 500px;
        color: #999999;
        vertical-align: center;
        .num {
          color: $priceColor;
          font-size: 20px;
        }
      }
    }
    .pay-type {
      margin-top: 20px;
      background-color: #fff;
      padding: 20px;
      .head {
        padding-bottom: 20px;
        border-bottom: 1px solid #999999;
        font-size: 15px;
      }
      .item {
        p {
          margin: 20px 0;
        }
        a {
          display: inline-block;
          width: 150px;
          height: 50px;
          border: 1px solid rgba(153, 153, 153, 0.49);
          text-align: center;
          line-height: 50px;
          align-items: center;
          margin-right: 50px;
        }
        & :hover {
          background-color: #eeeeee;
        }
        .icon-weixinzhifu {
          font-size: 20px;
          color: #4CAF50;
          margin-top: 40px;
        }
        .icon-zhifubaopc {
          font-size: 22px;
          color: #2196F3;
        }
      }
    }
  }
}
</style>
